
<!-- 通知公告 -->

<template>
  <div class="inform">
    <div class="inform-title">
      <div class="inform-title-left">
        <div class="logo"></div>
        通知公告
      </div>
      <div class="inform-title-right">
        <div>查看全部</div>
        <img src="@/assets/icons/more.png" alt="" />
      </div>
    </div>
    <div class="inform-content">
      <div class="inform-content-item" v-for="item in 2" :key="item">
        <div class="state" style="background: #c3f1d8; color: #57d592">普通</div>
        <div class="content">
          <div>上海汽车集团股份有限公司关于核心技术交流</div>
          <img src="@/assets/icons/new.png" alt="" class="new" />
        </div>
        <div class="time">2022-10-01</div>
        <img src="@/assets/icons/more.png" alt="" class="more" />
      </div>
      <div class="inform-content-item" v-for="item in 10" :key="item" @click="openShow1(item)">
        <div class="state">重要</div>
        <div class="content">
          <div>
            上海汽车集团股份有限公司关于核心技术交流上海汽车集团股份有限公司关于核心技术交流
          </div>
          <img src="@/assets/icons/new.png" alt="" class="new" />
        </div>
        <div class="time">2022-10-01</div>
        <img src="@/assets/icons/more.png" alt="" class="more" />
      </div>
    </div>
    <div class="inform-more" v-show="show1">
        <div class="box">
            <div class="box-title">
                <div>通知公告</div>
                <img @click="show1 = false" src="@/assets/icons/关闭.png" alt="">
            </div>
            <div class="box-content">
              <div class="box-content-head">关于如何实现小康社会--我们之后如何步入大康</div>
              <div class="box-content-describe">
                <div class="item">
                  <span class="item-title">记录单位：</span>
                  <span class="item-content">XFA-3721209</span>
                </div>
                 <div class="item">
                  <span class="item-title">重要程度：</span>
                  <span class="item-content">重要</span>
                </div>
                 <div class="item">
                  <span class="item-title">发布日期：</span>
                  <span class="item-content">2022-10-01</span>
                </div>
                 <div class="item">
                  <span class="item-title">发布单位：</span>
                  <span class="item-content">lims第五事业部</span>
                </div>
              </div>
              <hr>
              <div class="box-content-body">
                <div v-for="item in 100" :key="item">{{item}}</div>
              </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
       show1: false, // 详情弹框
    };
  },
  methods:{
    openShow1(item) {
        console.log(item)
        this.show1 = true
    }
  },
  created() {},
};
</script>

<style lang='scss' scoped>
.inform {
  height: 100%;
  width: 100%;
  padding: 0 0.1rem;
  &-title {
    height: 0.45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      display: flex;
      align-items: center;
      font-size: 0.14rem;
      font-weight: bold;
      .logo {
        width: 0.1rem;
        height: 0.3rem;
        background-color: rgb(209, 46, 46);
        margin-right: 0.1rem;
      }
    }
    &-right {
      cursor: pointer;
      display: flex;
      align-items: center;
      & > img {
        height: 0.25rem;
      }
    }
  }
  &-content {
    cursor: pointer;
    overflow: scroll;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    height: calc(100% - 0.55rem);
    width: 100%;
    padding: 0 0.08rem;
    &-item {
      margin: 0.06rem 0;
      padding: 0 0.08rem;

      height: 0.35rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .state {
        width: 0.4rem;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.05rem;
        background-color: rgba(255, 7, 7, 0.1);
        color: red;
      }
      .content {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        & > div {
          margin-left: 0.1rem;
          max-width: 3.7rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        & > img {
          height: 0.2rem;
          margin-left: 0.03rem;
        }
      }
      .time {
        width: 1rem;
        text-align: right;
        margin-left: 0.15rem;
      }
      .more {
        height: 0.2rem;
      }
      &:hover {
        box-shadow: 0 1px 1px 1px rgba(139, 197, 214, 0.5);
      }
    }
  }
  &-more{
    z-index: 9;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .box{
        width: 75%;
        height: 80%;
        background-color: #fff;
        &-title{
            padding: 0 0.2rem;
            height: 0.5rem;
            font-size: 0.16rem;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &>img{
                width: 0.2rem;
            }
        }
        &-content{
          height: calc(100% - 0.5rem);
          &-head{
            height: 0.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.15rem;
            font-weight: bold;
          }
          &-describe{
            height: 0.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.13rem;
            .item{
              margin: 0 0.15rem;
              &-title{
                font-weight: bold;
              }
            }
          }
          &>hr{
            margin: 0 0 0.15rem 0;
          }
          &-body{
            height: calc(100% - 1rem);
            cursor: pointer;
            padding: 0 0.2rem;
            overflow: scroll;
            &::-webkit-scrollbar{
              width: 0;
              height: 0;
            }
          }
        }
    }
  }
}
</style>